/*
 * @Author: LGX
 * @Date: 2022-03-31 12:34:45
 * @LastEditors: LGX
 * @LastEditTime: 2022-04-06 16:57:05
 * @FilePath: \erp-management-system\src\views\announcement\AnnouncementAdd.jsx
 * @Description: 新增公告
 * 
 */
import React, { useState } from 'react'
import { Row, Col, Input, Space, Radio, Upload, message, Modal } from 'antd'
import MyButton from '../../components/customerseas/MyButton'
import { CheckCircleOutlined } from '@ant-design/icons';
import WangEditor from '../../components/announcements/WangEditor'
import '../../components/announcements/announcement.moudle.css'
export default function AnnouncementAdd() {
  //公告分类选择
  const [classification, setClassification] = useState(1);
  //总结内容
  const [context, setContext] = useState();
  //文件fileID
  const [fileid, setFileid] = useState('fileid12131');
  //接收人
  const [personer, setPersoner] = useState('qadsasd');
  //选择接收人modal显示状态
  const [recipient, setRecipient] = useState(false);
  //上传文件接口信息配置
  const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  //接收人modal框
  const handleOk = () => {
    setRecipient(false);
    
  };
  const handleCancel = () => {
    setRecipient(false);
  };
  //radio选择框
  const onChangeRadio = e => {
    setClassification(e.target.value);
  };
  //保存按钮
  const saveBtn = () => {
    console.log(context, classification, personer, fileid);
  }
  return (
    <div className='addMent'>
      <div style={{ height: '40px', width: '100%', lineHeight: '40px', fontSize: '20px', textAlign: 'center', fontWeight: '600' }}>提交工作报告</div>
      <Row gutter={20} className='row' align='middle'>
        <Col span={4} style={{ textAlign: 'right' }}>接收人：</Col>
        <Col span={20}>
          <Space>
            <Input width={180} defaultValue={personer} disabled />
            <MyButton icon={<CheckCircleOutlined />} onClick={() => { setRecipient(!recipient) }} color='#5cad69' title='选择接收人' />
          </Space>
          <Modal title="选择收件人" visible={recipient} onOk={handleOk} onCancel={handleCancel} cancelText="关闭" okText="保存">

          </Modal>
        </Col>
      </Row>
      {/* 分类 */}
      <Row gutter={20} className='row' align='middle'>
        <Col span={4} style={{ textAlign: 'right' }}>分类：</Col>
        <Col span={20}>
          <Radio.Group defaultValue={classification} onChange={onChangeRadio}>
            <Radio value={1}>日报</Radio>
            <Radio value={2}>周报</Radio>
            <Radio value={3}>月报</Radio>
            <Radio value={4}>季报</Radio>
            <Radio value={5}>年报</Radio>
            <Radio value={6}>工作心得</Radio>
          </Radio.Group>
        </Col>
      </Row>
      <Row gutter={20} >
        <Col span={4} style={{ textAlign: 'right' }}>工作总结：</Col>
        <Col span={20}>
          <WangEditor setContext={setContext} />
        </Col>
      </Row>
      <Row gutter={20} className='row'  >
        <Col span={4} style={{ textAlign: 'right' }}>附件：</Col>
        <Col span={20}>
          <Upload {...props}>
            <MyButton color='#00b7ee' title='选择文件' />
          </Upload>,
        </Col>
      </Row>
      <Row justify='center' style={{marginTop:window.innerHeight*0.1}}>
        <Col span={4}>
          <MyButton size='large' color='#448aca' title="保存" block onClick={saveBtn} />
        </Col>
      </Row>
    </div>
  )
}
